import { /*RFValue*/ } from "react-native-responsive-fontsize";
import Feather from "react-native-vector-icons/Feather";
import styled from "styled-components/native";

export const Modal = styled.Modal`
  width: 100%;
  height: auto;
`;

export const ModalContentContainer = styled.View`
  flex: 1;
  padding: 0 ${/*RFValue*/(12)}px;
  width: 100%;
  justify-content: space-between;
`;

export const InputsWrapper = styled.View`
  padding: ${/*RFValue*/(12)}px;
  margin-bottom: ${/*RFValue*/(2)}px;
  background-color: ${({ theme }) => theme.colors.background};
`;
export const ButtonsWrapper = styled.View``;
export const ButtonContainer = styled.View`
  margin: ${/*RFValue*/(10)}px 0px;
  border-radius: ${/*RFValue*/(16)}px;
`;
export const ModalOverlay = styled.View`
  flex: 1;
  background-color: rgba(0, 9, 23, 0.4);
  align-items: center;
  justify-content: center;
  z-index: 0;
  height: 200px;
`;

export const ButtonsContainer = styled.Pressable`
  flex-direction: row;
  border-radius: ${/*RFValue*/(12)}px;
  align-items: center;
  justify-content: center;
  padding: ${/*RFValue*/(6)}px ${/*RFValue*/(8)}px;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
`;

export const ButtonText = styled.Text`
  font-size: ${/*RFValue*/(14)}px;
  margin-left: ${/*RFValue*/(4)}px;
  color: rgba(72, 72, 74, 1);
  font-family: HarmonyOS_Sans_SC_Regular;
  font-weight: 400;
  flex-wrap: nowrap;
  overflow: hidden;
`;

export const Container = styled.View`
  padding: ${/*RFValue*/(23)}px ${/*RFValue*/(16)}px;
  background-color: ${({ theme }) => theme.colors.white};
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-top-left-radius: ${/*RFValue*/(16)}px;
  border-top-right-radius: ${/*RFValue*/(16)}px;
`;

export const Title = styled.Text`
  color: rgba(44, 44, 46, 1);
  font-size: ${/*RFValue*/(18)}px;
  font-weight: 700;
  font-family: "HarmonyOS_Sans_SC_Regular";
`;

export const IconWrapper = styled.TouchableOpacity`
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 1);
  width: ${/*RFValue*/(40)}px;
  height: ${/*RFValue*/(40)}px;
  border-radius: ${/*RFValue*/(146)}px;
`;

export const Icon = styled(Feather)`
  color: ${({ theme }) => theme.colors.black};
  font-size: ${/*RFValue*/(22)}px;
`;
